<template>
	<div>
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<div style="display: flex; width: 100%; height: 60px">
				<div>
					<el-form-item :label="$t('3r2FlPOWtIwAoavmSIfU')">
						<el-input :placeholder="$t('y25yDGqSsWbi5Cn6OEo32')" clearable />
					</el-form-item>
				</div>
				<div style="margin: 0 30px">
					<el-form-item :label="$t('csk5NtdKi8nVUtPQ6YTc')">
						<el-input :placeholder="$t('7vzbqQxiRyYaDocJcl4Ec')" clearable />
					</el-form-item>
				</div>
				<div>
					<el-form-item>
						<el-button icon="ele-Plus" type="primary" @click="() => addApp()"> {{ $t('8Go5Ln_3qnNgb8npBvhHo') }} </el-button>
					</el-form-item>
				</div>
			</div>
		</el-card>
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
			<el-table :data="list" style="width: 100%">
				<el-table-column type="index" :label="$t('jv5daEsJOxluxy1IHzw2')" width="55" align="center" :index="indexMethod" />
				<el-table-column prop="name" :label="$t('3r2FlPOWtIwAoavmSIfU')" align="center" />
				<el-table-column prop="code" :label="$t('ktBzse8BhPXyZEmb3AtV6')" align="center" />
				<el-table-column prop="active" :label="$t('kH77oIp8OBmcdjItruZyu')" align="center" />
				<el-table-column prop="status" :label="$t('nwnuUvDqOGn9ua4laWWbO')" align="center" />
				<el-table-column prop="sort" :label="$t('ivdjt7Bot7XrcZX12b3a')" align="center" />
				<el-table-column :label="$t('s0yg_8Mx2Izv3aNvEafDg')" align="center">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary" @click="() => addApp(scope.row)"> {{ $t('hTgXnOh1o8lpoVyK7veb') }} </el-button>
						<el-popconfirm
							confirm-button-text="确认"
							cancel-button-text="取消"
							icon="InfoFilled"
							icon-color="#626AEF"
							:title="$t('nZ1cI3Dfo0sMIiTTHnmx')"
							@confirm="confirmEvent(scope.row.id, getData)"
						>
							<template #reference>
								<el-button icon="ele-Delete" size="small" text type="danger"> {{ $t('arAQiFeeBbj831NKd5aE9') }} </el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-model:currentPage="pageNo"
				v-model:page-size="pageSize"
				:total="totalRows"
				:page-sizes="[10, 20, 50, 100]"
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
			/>
		</el-card>
		<AppForm ref="appFormRef" @updateData="getData" />
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import getTableData from '/@/utils/getTableData';
import { getSysAppList, deleteApp } from '/@/api/system/app/index';
import AppForm from './component/appForm.vue';
import mittBus from '/@/utils/mitt';
export default defineComponent({
	name: 'systemApp',
	components: {
		AppForm,
	},
	setup(props) {
		const appFormRef = ref();
		// 新增或者编辑
		const addApp = (data?: object) => {
			appFormRef.value.openForm(data);
		};
		// 删除应用
		const confirmEvent = async (id: number | string, updateFun: Function) => {
			try {
				let res = await deleteApp({ id });
				updateFun();
			} catch (err) {
			} finally {
			}
		};
		return {
			...getTableData(getSysAppList),
			addApp,
			appFormRef,
			confirmEvent,
		};
	},
	mounted() {},
});
</script>
